$(function(){
    $(document)
        // 隐藏下拉栏
        .on("click", function(event){
            $(".select").removeClass("select__active");
        })
        // 显示下拉栏
        .on("click", ".select", function(event){
            event.stopPropagation();
            // if($(".video-slide").length){
            $(this).toggleClass("select__active").parents(".select-box").siblings().find(".select__active").removeClass("select__active");
            // }
        });
    // 下拉选择
    $(".select_list").on("click", "li", function(){
        var $this = $(this);
        var name = $this.data("name");
        var code = $this.data("code");
        var type = $this.parent().data("type");
        $this.addClass("select_list__active").siblings("li").removeClass("select_list__active").parents(".select_list_box").siblings(".select_value").text(name);

        if(type === "province"){
            selectProvince(code);
        }else if(type === "city"){
            selectCity(code);
        }
    });
    // 选择营业厅
    $("#hallList").on("click", "li", function(){
        var $this = $(this);
        var code = $this.data("code");
        $this.addClass("hall__active").siblings("li").removeClass("hall__active");
        selectHall(code);
    });
    // 选择摄像头
    $("#cameraList").on("click", "li", function(){
        var $this = $(this);
        if(!$this.hasClass("camera__active")){
            var index = $this.index();
            $this.addClass("camera__active").siblings("li").removeClass("camera__active");
            selectCamera(index);
        }
    });

    var objectId = 'playerMap0';
    var initCode = '990010000000000000';
    var videoMainWndIndexArr = [];
    var cameraData = {
        cameraList: []
    };
    var thisHallCode = '';
    var thisCameraCode = '';
    //每隔三位小数加逗号
    function addComma(num) {
        var num = (num || 0).toString();
        var result = '';
        while (num.length > 3) {
            result = ',' + num.slice(-3) + result;
            num = num.slice(0, num.length - 3);
        }
        if (num) { result = num + result; }
        return result;
    }

    // 渲染视频监测参数
    function renderVideoInfo(data){
        var infoData = {
            list: [
                {
                    title: '覆盖省（市）公司',
                    number: addComma(data.province).split('')
                },
                {
                    title: '覆盖地市',
                    number: addComma(data.city).split('')
                },
                {
                    title: '营业厅数量',
                    number: addComma(data.hall).split('')
                },
                {
                    title: '营业厅视频设备',
                    number: addComma(data.camera).split('')
                },
            ]
        }
        $("#videoInfo").html(template('infoTpl', infoData));
    }
    // 渲染下拉栏
    function renderSelect(obj) {
        var data = obj.data;
        var defaultData = obj.default || obj.data.areaList[0].areaName;
        var $listEle = $("#"+obj.type+"List");
        var $showEle = $("#"+obj.type+"Value");
        $listEle.html(template('selectTpl', data));
        $showEle.text(defaultData);
    }
    // 渲染营业厅列表
    function renderHalls(data){
        $("#hallList").html(template('HallTpl', data));
        $("#hallList").find("li").each(function(){
            if($(this).data('code') == thisHallCode){
                $(this).addClass("hall__active");
            }
        });
    }
    // 渲染摄像头列表
    function renderCamera(data){
        var camera = [];
        cameraData.cameraList = [];
        data.map(function(item, index){
            camera.push(item);
            if(index+1 == data.length || !((index+1)%4)){
                cameraData.cameraList.push(camera);
                camera = [];
            }
        })
        $("#cameraList").html(template('cameraTpl', cameraData));
        $("#cameraList").find("li").each(function(){
            if($(this).data('mark') == thisCameraCode){
                $(this).addClass("camera__active");
            }
        });
    }
    // 选择省
    function selectProvince(provinceCode){
        searchAreaList(provinceCode, objectId).then(function(cityData){
            if(cityData&&cityData.areaList.length>0){
                var cityCode = cityData.areaList[0].areaCode;
                renderSelect({data: cityData, type: 'city'});
                selectCity(cityCode);
            }
        });
    }
    // 选择市
    function selectCity(cityCode){
        searchHallList(cityCode, objectId).then(function(hallData){
            if(hallData.hallList.length>0){
                thisHallCode = hallData.hallList[0].hallValue;
                renderHalls(hallData);
                selectHall(thisHallCode);
            }else{
                renderHalls(hallData);
                renderCamera([])
            }
        });
    }
    // 选择营业厅
    function selectHall(hallCode){
        thisHallCode = hallCode;
        searchVideoList(hallCode, objectId).then(function(data){
            if(!thisCameraCode&&data.videoList.length>0){
                thisCameraCode = data.videoList[0].videoCode;
                renderCamera(data.videoList);
                selectCamera(0);
            }else{
                renderCamera(data.videoList);
            }
        });
    }
    // 选择摄像头
    function selectCamera(index){
        var cameraList = cameraData.cameraList[index];
        thisCameraCode = cameraList[0].videoCode;
        // $("#loading").show();
        videoMainWndIndexArr.map(function(item, index){
            stopAllVideo(item, "playerMap"+index);
        });
        $(".player-title").text("");
        cameraList.map(function(item, index){
            $("#playerTitle"+index).html(item.videoName);
            //if(videoMainWndIndexArr.length < 4){
            var videoMainWndIndex = createWindow('playerMap'+index);
            videoMainWndIndexArr.push(videoMainWndIndex);
            //}
            openVideo(videoMainWndIndex,item.videoCode,item.videoName,'playerMap'+index);
        });
    }
    // 页面初始化
    function initPage(initCode, objectId){
        // 初始化
        ocxHtmlLoad(objectId);
        searchAreaList(initCode, objectId).then(function(provinceData){
            //var provinceCode = provinceData.areaList[0].areaCode;
            var provinceCode = '040010000000000000';// 河北平台
            renderSelect({data: provinceData, type: 'province', default:'河北平台'});
            selectProvince(provinceCode);
            renderVideoInfo({
                "province": 27,
                "city": 276,
                "hall": 4335,
                "camera": 23157
            });
        });
    }

    initPage(initCode, objectId);
})